<template>
  <div>
    <canvas ref="canvas" :width="imageWidth" :height="imageHeight" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/your/image.jpg',
      text: 'Your Text Here',
      imageWidth: 500, // 图片宽度
      imageHeight: 300, // 图片高度
      position: { x: 10, y: 20 } // 文字在canvas上的位置
    }
  },
  mounted() {
    this.drawImageWithText()
  },
  methods: {
    drawImageWithText() {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')
      const image = new Image()
      image.onload = () => {
        ctx.drawImage(image, 0, 0)
        ctx.font = '20px Arial'
        ctx.fillStyle = 'white'
        ctx.fillText(this.text, this.position.x, this.position.y)
      }
      image.src = this.imageUrl
    }
  }
}
</script>
